.modal-backdrop-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--z-modal);
    backdrop-filter: blur(2px);
    background-color: rgba(0, 0, 0, 0.8);

    &.is-centered {
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

.modal-content-container {
    background-color: var(--bg-primary);
    border: 1px solid var(--neutral-100);
    border-radius: 4px;
    box-shadow: var(--shadow-5);
    animation: modal-slide-down 0.3s ease-out;
    will-change: transform, opacity;

    .modal-title {
        font-weight: 600;
    }

    .modal-content {
        padding: var(--spacing-4);

        .modal-description {
            font: var(--sm);
            color: var(--text-secondary);
            line-height: 1.4;
        }
    }
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-2);
    padding-left: var(--spacing-4);
    border-bottom: 1px solid var(--neutral-200);

    .modal-close-button {
        padding: var(--spacing-2);
        cursor: pointer;
        border-radius: 4px;
        transition: background-color var(--transition-normal);

        &:hover {
            background-color: var(--neutral-100);
        }

        line,
        circle,
        rect,
        path {
            stroke: var(--text-secondary);
        }
    }
}

.modal-footer-container {
    display: flex;
    justify-content: space-between;
    margin-top: 16px;
    padding: var(--spacing-4);
    padding-left: var(--spacing-2);
    background-color: var(--neutral-50);
    box-shadow: inset var(--shadow-2);

    &.right-aligned {
        justify-content: flex-end;
    }

    .button {
        margin-left: var(--spacing-2);
    }
}

@keyframes modal-slide-down {
    0% {
        transform: translateY(-10px);
        opacity: 0;
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}